<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <style>
        div{
            width: 500px;
        }
    </style>
    
</head>
<body>
    <div style="height:300px;font-size: 30px;">
        东风吹战鼓擂,当今世界谁怕谁
    </div>

    <button onclick="edit_background()" style="background-color: red;">中国红</button>

    <script>
        //先找到div  
        // var divEle = document.getElementsByTagName('div')[0];
        // console.log(divEle.style.height);
        // console.log(divEle.style.fontSize); // font-size 中间有横线  
        //必须转成小驼峰   
        //上面是行内 
        // console.log(divEle.style.width);
        // console.log(divEle.style.backgroundColor);
        // // 不支持使用上面的方式拿到内联和外链 

        //只能采用下面的方式  
        // console.log(window.getComputedStyle(divEle).width)
        // console.log(window.getComputedStyle(divEle).backgroundColor)

        // divEle.style.backgroundColor = 'pink';

        // 如果样式名中有-  除了使用 小驼峰 哈可以使用 数组关联语法  
        // divEle.style['background-color'] = 'blue';

        function  edit_background(){
            // 获取按钮的颜色 
            // 获取按钮  拿到按钮的样式 
            // getElementsByTagName 拿到的是伪数组 我们摇的是元素 
            //  所以要通过下标拿到元素
            var btn = document.getElementsByTagName('button')[0];
            var color = btn.style['background-color'];
            // 修改body的颜色
            // 获取body 设置body的样式  
            var bd = document.body;
            bd.style.backgroundColor = color;
        }

    </script>
</body>
</html>